<meta charset="utf-8">

<div class="content-table">
    <div class="patient-info">
        <div class="top">
            <span class="name">{{vm.patient.patientname}}</span>
            <span class="name info-item">{{vm.patient.patientid}}</span>
        </div>
        <div class="patient-info-content clearfix">
            <div class="patient-info-header" ng-if="vm.patient.coverphoto==null">
                <div ngf-select ng-model="cover.file">
                    <img class="img-header" ngf-thumbnail="cover.file || 'img/0.jpg'">
                </div>
                <span class="btn btn-primary patient-info-ps" ng-click="uploadcover(cover)" ng-if="uploadnow">上传头像</span>
                <div class="progress" ng-if="!uploadnow">
                    <div class="progress-bar progress-bar-success patient-info-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{cover.progress}}%;">
                        <span>{{cover.progress}}%</span>
                    </div>
                </div>
            </div>
            <div class="patient-info-header" ng-if="vm.patient.coverphoto!=null">
                <img class="img-header" ng-src="images{{vm.patient.coverphoto}}">
            </div>

            <div class="patient-info-item">
                <div class="items">
                    <div>
                        <span>{{vm.patient.patientbithday}}</span>
                        <span class="info-item">{{vm.patient.patientgender}}</span>
                        <span class="info-item">{{vm.patient.treatcondition}}</span>
                    </div>
                    <div>
                        <span>治疗时间：</span>
                        <span>{{vm.patient.treatdate}}</span>
                    </div>
                    <div>
                        <span>临床特征：</span>
                        <span>{{vm.patient.clinicalcondition}}</span>
                    </div>
                    <div>
                        <span>治疗详情：</span>
                        <span>临床检验</span>
                    </div>
                </div>
            </div>
        </div>
        <a  ng-click="uploadBoard()">上传图片</a>
        <a  ng-if="vm.photos.length!=0" ng-href="/apps/services/photo/download/{{vm.patient.patientid}}">下载病人图片</a>
        <a  ng-if="vm.patient.treatcondition=='进入治疗'" ng-click="endTreat()">结束治疗</a>
        <a  ng-click="vm.mutiPicker.pickStarter()" ng-if="vm.displayBoards.length>1 && !vm.mutiPicker.pickStamp">多选+</a>
        <a  ng-click="vm.mutiPicker.pickEnder()" ng-if="vm.mutiPicker.pickStamp">取消</a>
        <div class="" ng-if="vm.mutiPicker.pickStamp">
          <input type="checkbox" ng-model="vm.mutiPicker.chooseAll" ng-change="vm.mutiPicker.pickAll(vm.mutiPicker.chooseAll)">全选
          <button class="btn btn-danger" ng-click="vm.mutiPicker.deletePicker()">删除所选时间点的图片</button>
          <!-- <button class="btn btn-success" ng-click="vm.mutiPicker.downloadPicker()"downloadPicker>下载所选时间点的图片</button> -->
        </div>

    </div>

    <div class="patient-timeline clearfix">
        <ul>
            <li ng-repeat="displayBoard in vm.displayBoards track by $index">
                <div class="timeline-item-time">
                    <span>{{displayBoard.recordDate}}</span>
                </div>
                <div class="timeline-item-node">
                  <input type="checkbox" ng-model="displayBoard.picked" ng-if="vm.mutiPicker.pickStamp">
                </div>
                <div class="timeline-item-main">
                    <div class="timeline-item-main-content content-table">
                        <div class="item-main-title">
                            <span>{{displayBoard.treatState}}</span>
                            <span class="info-item">{{displayBoard.treatTime}}</span>
                            <button class="btn btn-danger" ng-click="vm.mutiPicker.deleteSinglePicker(displayBoard.recordDate)">删除这组图片</button>
                            <a class="btn btn-primary " data-target="#myModal" data-toggle="modal" ng-click="checkphotos(displayBoard.treatStateEn,displayBoard.recordDate)">
                                查看大图</a>
                        </div>
                        <div class="item-main-photo">
                            <div>
                                <div class="item-main-photo-img" ng-repeat="photo in vm.photos | filter:{phototype:'head',photodate:displayBoard.recordDate}">
                                    <img class="img-thumbnail img-head" ng-src="images{{photo.photourl}}">
                                </div>
                                <div class="item-main-photo-img" ng-repeat="photo in vm.photos | filter:{phototype:'ximg',photodate:displayBoard.recordDate}">
                                    <img class="img-thumbnail img-ximg" ng-src="images{{photo.photourl}}">
                                </div>
                            </div>
                            <div>
                                <div class="item-main-photo-img" ng-repeat="photo in vm.photos | filter:{phototype:'teeth',photodate:displayBoard.recordDate}">
                                    <img class="img-thumbnail img-teeth" ng-src="images{{photo.photourl}}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-content zu-wrap content-table">
        <div class="carousel slide" data-interval="false" id="checkPics">
            <div class="photo-upload-panel">
                <!-- 导航栏 -->
                <div class="upload-nav">
                    <nav class="navbar navbar-upload">
                        <div class="navbar-header">
                            <a class="navbar-brand navbar-patient-name">
                                {{vm.patient.patientname}}
                            </a>
                        </div>
                        <ul class="nav navbar-nav">
                            <li class="active" data-slide-to="0" data-target="#checkPics">
                                <a href="javascript:;">面部照片</a>
                            </li>
                            <li data-slide-to="1" data-target="#checkPics">
                                <a href="javascript:;">口腔照片</a>
                            </li>
                            <li data-slide-to="2" data-target="#checkPics">
                                <a href="javascript:;">X光片</a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <!-- 轮播（Carousel）项目 -->
                <div class="upload-inner">
                    <div class="carousel-inner">
                        <div class="item active upload-picker">
                            <ul class="upload-picker-heads">
                                <li class="upload-item" ng-repeat="photo in vm.photos | filter:{phototype:'head',photodate:currentphotodate}">
                                    <div class="upload-head-img">
                                        <img ng-src="images{{photo.photourl}}"/>
                                        <button class="btn btn-sm btn-primary edit-pic-button" ng-click="vm.cropper.editCroper(photo)">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                        <a class="btn btn-sm btn-primary download-pic-button" ng-href="/apps/services/photo/download/single/{{photo.id}}">
                                            <span class="glyphicon glyphicon-download"></span>
                                        </a>
                                        <button class="btn btn-sm btn-primary delete-pic-button" ng-click="removeAlert(photo)">
                                            <span class="glyphicon glyphicon-trash"></span>
                                        </button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="item upload-picker">
                            <ul class="upload-picker-teeth">
                                <li class="upload-item" ng-repeat="photo in vm.photos | filter:{phototype:'teeth',photodate:currentphotodate}">
                                    <div class="upload-teeth-img">
                                        <img ng-src="images{{photo.photourl}}"/>
                                        <button class="btn btn-sm btn-primary edit-pic-button" ng-click="vm.cropper.editCroper(photo)">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                        <a class="btn btn-sm btn-primary download-pic-button" ng-href="/apps/services/photo/download/single/{{photo.id}}">
                                            <span class="glyphicon glyphicon-download"></span>
                                        </a>
                                        <button class="btn btn-sm btn-primary delete-pic-button" ng-click="removeAlert(photo)">
                                            <span class="glyphicon glyphicon-trash"></span>
                                        </button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="item upload-picker">
                            <ul class="upload-picker-ximg">
                                <li class="upload-item" ng-repeat="photo in vm.photos | filter:{phototype:'ximg',photodate:currentphotodate}">
                                  <div class="upload-x-img">
                                        <img ng-src="images{{photo.photourl}}"/>
                                        <button class="btn btn-sm btn-primary edit-pic-button" ng-click="vm.cropper.editCroper(photo)">
                                            <span class="glyphicon glyphicon-pencil"></span>
                                        </button>
                                        <a class="btn btn-sm btn-primary download-pic-button" ng-href="/apps/services/photo/download/single/{{photo.id}}">
                                            <span class="glyphicon glyphicon-download"></span>
                                        </a>
                                        <button class="btn btn-sm btn-primary delete-pic-button" ng-click="removeAlert(photo)">
                                            <span class="glyphicon glyphicon-trash"></span>
                                        </button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <a class="btn btn-primary" ng-if="vm.currentHeads.length!=0" ng-href="/apps/services/photo/download/date/{{vm.patient.patientid}}/{{currentphotodate}}">下载该日期所有照片</a>
            <a class="btn btn-primary" ng-if="vm.currentHeads.length!=0" ng-href="/apps/services/photo/download/type/{{vm.patient.patientid}}/head/{{currentstate}}/{{currentphotodate}}">下载面部照片</a>
            <a class="btn btn-primary" ng-if="vm.currenTeeth.length!=0" ng-href="/apps/services/photo/download/type/{{vm.patient.patientid}}/teeth/{{currentstate}}/{{currentphotodate}}">下载牙齿照片</a>
            <a class="btn btn-primary" ng-if="vm.currentXimgs.length!=0" ng-href="/apps/services/photo/download/type/{{vm.patient.patientid}}/ximg/{{currentstate}}/{{currentphotodate}}">下载X光片</a>
            <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
        </div>
    </div>
</div>

<script type="text/ng-template" id="removeAlert.html">
    <div class="modal-header">
        <h4 class="modal-title">确定删除图像吗？</h4>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" ng-click="removePicConfirm()">删除</button>
        <button class="btn btn-primary" ng-click="cancel()">取消</button>
    </div>
</script>

<script type="text/ng-template" id="removePickerAlert.html">
    <div class="modal-header">
        <h4 class="modal-title">确定删除所选图像吗？</h4>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" ng-click="removePickerConfirm()">删除</button>
        <button class="btn btn-primary" ng-click="cancel()">取消</button>
    </div>
</script>

<script type="text/ng-template" id="removePickersAlert.html">
    <div class="modal-header">
        <h4 class="modal-title">确定删除所选图像吗？</h4>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" ng-click="removePickersConfirm()">删除</button>
        <button class="btn btn-primary" ng-click="cancel()">取消</button>
    </div>
</script>

<script type="text/ng-template" id="editPicture.html">
    <div class="modal-header">
        <h4 class="modal-title">编辑图像</h4>
        <span>*当旋转图像后会有比例丢失，点击“相片误差复位”会修正误差。
          编辑后点击保存按钮可保存编辑后的图片</span>
    </div>
    <div class="edit-pic-img">
        <image-cropper
            image-url="{{vm.cropper.imageUrl}}"
            width="{{vm.cropper.cropperWidth}}"
            height="{{vm.cropper.cropperHeight}}"
            show-controls="true"
            fit-on-init="true"
            center-on-init="true"
            crop-callback="vm.cropper.updateResultImage"
            action-labels="vm.cropper.myButtonLabels"></image-cropper>
    </div>
    <div class="modal-footer">
        <!-- <button class="btn btn-danger" ng-click="vm.editPicConfirm()">保存</button> -->
        <button class="btn btn-primary" ng-click="cancel()">完成</button>
    </div>
</script>
